<template>
  <div class="ele-body">
    <el-card shadow="never" body-style="padding-top: 35px;">
      <el-form :model="form" ref="form" label-width="120px" :rules="rules">
        <el-form-item label="问卷地址：">
          <el-link type="primary" :underline="false" class="copy" @click="copyToClipboard(onlineUrl)">{{onlineUrl}}</el-link>
        </el-form-item>
        <!-- 单行文本框 -->
        <el-form-item label="访问密码：">
          <el-input show-password v-model="form.access_pwd" placeholder="请输入访问密码，不填写表示无需密码" clearable style="width: 20%"/>
        </el-form-item>
        <!-- 单选按钮 -->
        <el-form-item label="是否开启：">
          <el-radio-group v-model="form.is_enable">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="测评描述：">
<!--          <el-input type="textarea" v-model="form.description" placeholder="请输入专注力测评描述" rows="7" clearable style="width: 40%" :init="initEditor"/>-->
          <tinymce-editor v-model="form.description" :init="initEditor"></tinymce-editor>
        </el-form-item>
        <el-form-item label="测评异常分数：">
          <el-input-number v-model="form.warning_score" placeholder="请输入触发异常提醒的分数阈值" clearable style="width: 20%"/>
        </el-form-item>
        <el-form-item label="测评异常文案：">
          <tinymce-editor v-model="form.warning_text" :init="initEditor"></tinymce-editor>
        </el-form-item>
      </el-form>
      <div style="margin-left: 150px;">
        <el-button type="primary" @click="save" :loading="loading" v-if="permission.includes('sys:attentionsetting:edit')">保存更改</el-button>
        <el-button type="primary" :disabled="true" v-else>无权修改</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import Clipboard from 'clipboard';
import TinymceEditor from '@/components/TinymceEditor'
import {mapGetters} from "vuex";

export default {
  name: "AttentionSetting",
  components: {TinymceEditor},
  data() {
    return {
      loading: false,  // 保存按钮loading
      form: {
        access_pwd: '',
        is_enable: 1,
        description: '',
        warning_score: 14,
        warning_text: ''
      },  // 表单数据
      rules: {},
    }
  },
  computed: {
    ...mapGetters(['permission']),
    onlineUrl() {
      return process.env.VUE_APP_ONLINE_URL
    },
    /**
     * 初始化编辑器
     */
    initEditor() {
      return {
        height: 400,
        file_picker_callback: this.file_picker_callback,
        skin_url: this.$store.state.theme.theme === 'dark' ? '/tinymce/skins/ui/oxide-dark' : '/tinymce/skins/ui/oxide',
        content_css: this.$store.state.theme.theme === 'dark' ? '/tinymce/skins/content/dark/content.css' : '/tinymce/skins/content/default/content.css',
        images_upload_handler: (blobInfo, success, error) => {
          let file = blobInfo.blob();
          // 使用axios上传
          const formData = new FormData();
          formData.append('file', file, file.name);
          this.$http.post('/upload/uploadImage', formData).then(res => {
            if (res.data.code == 0) {
              success(res.data.data);
            } else {
              error(res.data.msg);
            }
          }).catch(e => {
            console.error(e);
            error(e.message);
          });
        }
      };
    }
  },
  mounted() {
    this.getConfigInfo();
  },
  methods: {

    copyToClipboard(text) {
      // Create a new clipboard instance
      const clipboard = new Clipboard('.copy', {
        text: () => text
      });

      // Trigger the copy action
      clipboard.on('success', () => {
        this.$message.success('复制成功');
        clipboard.destroy();
      });

      // Handle any errors
      clipboard.on('error', () => {
        console.error('复制失败');
        clipboard.destroy();
      });
    },
    // 获取配置信息
    getConfigInfo() {
      this.$http.get('/attentionsetting/index').then(res => {
        if (res.data.code === 0) {
          this.form = res.data.data;
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    /* 保存更改 */
    save() {
      this.loading = true;
      this.$http.post('/attentionsetting/edit', this.form).then(res => {
        this.loading = false;
        if (res.data.code === 0) {
          this.$message.success(res.data.msg);
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.loading = false;
        this.$message.error(e.message);
      });
    },
  }
}
</script>
